<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/6/19
  Time: 22:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/welcome.css"/>
<html>
<head>
    <title>Title</title>

</head>
<body>
<div class="right">

    <div class="wFont">
        <h2>欢迎来到!商品管理系统</h2>
        <h4>Welcome   to   the   Product   Management   System  !</h4>
    </div>

    <div class="new_prod">
    <div class="tittle_z">
<%--        <h1>🛫🛬</h1>--%>
        <!-- 循环滚动的字幕脚本 -->
        <script type="text/javascript">
            //js无缝滚动代码
            function marquee(i,direction){
                var obj=document.getElementById("marquee"+i);
                var obj1=document.getElementById("marquee"+i+"_1");
                var obj2=document.getElementById("marquee"+i+"_2");
                if(direction == "up"){
                    if(obj2.offsetTop-obj.scrollTop<=0){
                        obj.scrollTop-=(obj1.offsetHeight+20);
                    }else{
                        var tmp=obj.scrollTop;
                        obj.scrollTop++;
                        if(obj.scrollTop==tmp){
                            obj.scrollTop=1
                        }
                    }
                }else{
                    if(obj2.offsetWidth-obj.scrollLeft<=0){
                        obj.scrollLeft-=obj1.offsetWidth;
                    }else{
                        obj.scrollLeft++;
                    }
                }
            }
            function marqueeStart(i,direction){
                var obj=document.getElementById("marquee"+i);
                var obj1=document.getElementById("marquee"+i+"_1");
                var obj2=document.getElementById("marquee"+i+"_2");
                obj2.innerHTML=obj1.innerHTML;
                var marqueeVar=window.setInterval("marquee("+i+",'"+direction+"')",20);
                obj.onmouseover=function(){
                    window.clearInterval(marqueeVar);
                }
                obj.onmouseout=function(){
                    marqueeVar=window.setInterval("marquee("+i+",'"+direction+"')",20);
                }
            }
        </script>
        <div class="warp_sp">
            <div id="marquee1" class="marqueeleft">
                <div style="width: 8000px;">
                    <ul id="marquee1_1">
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="${pageContext.request.contextPath}/static/img/1.jpg">
                            </a>
                        </li>
                        <li>
                            <a class="pic">
                                <img width="290" height="180"src="${pageContext.request.contextPath}/static/img/2.jpg">
                            </a>
                        </li>
                        <li>
                            <a class="pic" >
                                <img width="290" height="180" src="${pageContext.request.contextPath}/static/img/3.jpg">
                            </a>
                        </li>
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="${pageContext.request.contextPath}/static/img/4.jpg">
                            </a>
                        </li>
                        <li>
                            <a class="pic" >
                                <img width="290" height="180" src="${pageContext.request.contextPath}/static/img/5.jpg">
                            </a>
                        </li>
<%--                        <li>--%>
<%--                            <a class="pic">--%>
<%--                                <img width="290" height="180" src="${pageContext.request.contextPath}/static/img/6.jpg">--%>
<%--                            </a>--%>
<%--                        </li>--%>
<%--                        <li>--%>
<%--                            <a class="pic" >--%>
<%--                                <img width="290" height="180" src="${pageContext.request.contextPath}/static/img/7.jpg">--%>
<%--                            </a>--%>
<%--                        </li>--%>
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="${pageContext.request.contextPath}/static/img/8.jpg">
                            </a>
                        </li>
                    </ul>
                    <ul id="marquee1_2"></ul>
                </div>
            </div>
        </div>
        <script type="text/javascript">marqueeStart(1,"left");</script>
    </div>
</div>
</div>
<%--<div id="footer">--%>
<%--        <h2>✈️ 🛩️ 🛫 🛬 🪂 🚁 🚟 🚠 🚡 🛰️ 🚀 🛸</h2>--%>
<%--        <h4>&copy;22计科（校企） 220507310125 zhangpeixia</h4>--%>
<%--</div>--%>

</body>
</html>
